export default {
  data() {
    return {
      menuListRef: '',
    }
  },
  mounted() {
    setTimeout(() => {
      this.scrollFunction()
    }, 100)
  },
  beforeDestroy() {
    if (!this.menuListRef) return
    if (this.menuListRef.attachEvent) {
      this.menuListRef.detachEvent('onmousewheel', this.mouseScroll)
    }
    if (this.menuListRef.addEventListener) {
      this.menuListRef.removeEventListener('DOMMouseScroll', this.mouseScroll, false)
    }
  },
  methods: {
    scrollFunction() {
      this.menuListRef = this.$refs[this.scrollRef]
      if (this.menuListRef.attachEvent) {
        this.menuListRef.attachEvent('onmousewheel', this.mouseScroll)
      } else if (this.menuListRef.addEventListener) {
        this.menuListRef.addEventListener('DOMMouseScroll', this.mouseScroll, false)
      }
      this.menuListRef.onmousewheel = this.menuListRef.onmousewheel = this.mouseScroll
    },
    mouseScroll(event) {
      let detail = event.wheelDelta || event.detail
      let moveForwardStep = -1
      let moveBackStep = 1
      let step = 0
      step = detail > 0 ? moveForwardStep * 100 : moveBackStep * 100
      event.preventDefault()
      this.menuListRef.scrollLeft = this.menuListRef.scrollLeft + step
    },
  },
}
